<template>
  <div class="svg-icon-wrapper" :class="`icon-${name}`">
    <svg v-if="isClient" class="svg-icon" aria-hidden="true">
      <use :xlink:href="`#icon-${name}`" />
    </svg>
    <div v-else class="skeleton"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useNuxtApp } from '#app'

const props = defineProps({
  name: {
    type: String,
    required: true
  }
})

const isClient = ref(process.client)

if (process.client) {
  const nuxtApp = useNuxtApp()
  nuxtApp.hook('app:mounted', () => {
    isClient.value = true
  })
}
</script>

<style scoped>
.svg-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

.skeleton {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #f5f5f5;
  border-radius: 2px;
}
</style>